<template>
  <view>
    <view class="heads">
      <image style="width: 115rpx; height: 100rpx;" src="../../../static/ico/ziyuan.png" mode=""></image>
      <view class="head"><text>欢迎来到KiRy云控</text></view>
    </view>
    <!-- <return-key></return-key> -->
    <view class="contents">
      <view class="auth">
        <text style="margin-top: 20rpx;">手机号</text>
        <view class="moneybox"><input placeholder="请输入手机号码" v-model="phonenumber" /></view>
        <!-- <view class="moneyboxs">
					<image src="../../../static/soujiyanzen.png" mode=""></image>
					<input placeholder="请输入手机验证码" v-model="phoncode" />
					<view class="indexdel">
						<text class="indextext" @click="getphone">{{ text }}</text>
					</view>
				</view> -->
        <text style="margin-top: 20rpx;">密码</text>
        <view class="moneyboxs"><input type="password" placeholder="请输入密码" v-model="code" :maxlength="maxlength" /></view>
        <view class="tishi_text" v-if="tishistate">密码至少包含数字和英文，长度为6-20</view>
      </view>
      <button class="btn" @click="login()" hover-class="active-btn">登陆</button>
      <!-- <button class="btn" @click="register()">注册</button> -->

      <!-- <view class="otherclass">
				<view class="othertext">—— 其他注册方式 ——</view>
				<image src="../../../static/weixin.png" mode="" @click="toweixinlogin()"></image>
			</view> -->
    </view>
  </view>
</template>

<script>
// 	import jswx from '../../../common/jwx.js';
// import returnKey from '@/components/return/return.vue';
export default {
  data() {
    return {
      time: 60,
      code: '',
      phoncode: '',
      refnumber: '',
      maxlength: 20,
      text: '获取验证码',
      phonenumber: '',
      tishistate: false,
      recommend_id: 0
    };
  },
  onBackPress(event) {
    uni.switchTab({
      url: '../index/index'
    });
    return true;
  },
  onShow() {},
  onLoad() {},
  methods: {
    login: function() {
      let that = this;
      if (this.phonenumber == '') {
        uni.showToast({
          icon: 'none',
          duration: 1500,
          title: '号码不能为空'
        });
        return false;
      } else if (!(/1[3|4|5|7|8|9][0-9]{9}/.test(this.phonenumber))) {
        uni.showToast({
          duration: 1500,
          icon: 'none',
          title: '手机号格式错误'
        })
        return false;
      }
      if (this.code == '') {
        uni.showToast({
          icon: 'none',
          duration: 1500,
          title: '密码不能为空'
        });
        return false;
      }
      this.$api({
        type: 'POST',
        url: '/index/index/login',
        data: {
          username: this.phonenumber,
          password: this.code
        }
      }).then(res => {
          console.log(111,res);
          if (res.code === 200) {
            uni.setStorageSync('uid', res.data.uid)
            uni.setStorageSync('username', res.data.username)
            uni.redirectTo({
              // url: '../../index/index'
            });
          } else if (res.code === 400) {
            uni.showToast({
              duration: 1500,
              title: res.msg,
              icon: 'none'
            })
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    register: function() {
      uni.navigateTo({
        url: './register/register'
      });
    }
  },

  timeout() {
    const that = this;
    if (parseInt(that.time) == 0) {
      that.text = '获取验证码';
      that.time = 60;
    } else {
      that.time--;
      that.text = that.time;
      setTimeout(function() {
        that.timeout();
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.heads {
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  margin-left: 35px;
}
.head {
  height: 45px;
  font-size: 48rpx;
  font-family: Noto Sans S Chinese;
  font-weight: 400;
  color: #000000;
}
.wellcome {
  width: 223px;
  height: 35px;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
}

.contents {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.auth {
  display: flex;
  flex-direction: column;
  margin-top: 30rpx;
}

.moneybox {
  display: flex;
  flex-direction: row;
  padding-bottom: 10rpx;
  // margin-left: 39rpx;
  width: 600rpx;
  padding-top: 25rpx;
  // margin-top: 249rpx;
  // border: 1rpx solid red;
  border-bottom: 1px solid rgba(153, 153, 153, 0.5);
}
image {
  width: 32rpx;
  height: 36rpx;
  margin-right: 20rpx;
}
.tishi_text {
  color: #fbc102;
  font-size: 26rpx;
  margin-top: 20rpx;
}
.moneyboxs {
  display: flex;
  flex-direction: row;
  // padding-bottom: 10rpx;
  // margin-left: 39rpx;
  padding-top: 25rpx;
  border-bottom: 1px solid rgba(153, 153, 153, 0.5);
}
.indextext {
  font-size: 26rpx;
  font-weight: 400;
  color: #fbc102;
  line-height: 20rpx;
}

.indexdel {
  display: flex;
  width: 180rpx;
  height: 60rpx;
  justify-content: center;
  align-items: center;
  border-radius: 10rpx;
  margin-left: 70rpx;
}

.btn {
  width: 600rpx;
  height: 100rpx;
  font-size: 30rpx;
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  line-height: 100rpx;
  margin-top: 60rpx;
  background: #2468cd;
  border-radius: 20rpx;
}
.fangshi {
  width: 600rpx;
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
  color: #262626;
  font-size: 28rpx;
}
.otherclass {
  margin-top: 400rpx;
  color: #8f8f8f;
  font-size: 28rpx;
  image {
    width: 100rpx;
    height: 100rpx;
    margin-top: 40rpx;
    margin-left: 100rpx;
  }
}
.active-btn {
  background-color: rgba(36, 104, 205, 0.8);
}
</style>
